import { defineComponent, PropType } from 'vue'
import { Handle, Position } from '@vue-flow/core'

export default defineComponent({
  name: 'StartNode',
  props: {
    data: {
      type: Object as PropType<{
        label: string
        icon: string
        color: string
        config: {
          params?: Array<{
            name: string
            type: 'string' | 'number' | 'boolean'
            default?: any
            description?: string
          }>
        }
      }>,
      required: true,
    },
    selected: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  setup(props) {
    return () => (
      <div
        class={`relative shadow-lg rounded-md border transition-colors w-[180px] ${
          props.selected ? 'border-white/50' : 'border-transparent'
        }`}
        style={{
          background: `linear-gradient(to right, ${props.data.color}dd, ${props.data.color}aa)`,
          backdropFilter: 'blur(8px)',
        }}
      >
        <div class="p-2">
          <div class="flex items-center gap-2">
            <div
              class="w-6 h-6 rounded-md flex items-center justify-center shrink-0"
              style={{
                background: `${props.data.color}`,
                boxShadow: `0 0 12px ${props.data.color}66`,
              }}
            >
              <i class={`${props.data.icon} text-base text-white`} />
            </div>
            <div class="flex flex-col">
              <span class="text-xs font-medium text-white leading-tight">
                {props.data.label}
              </span>
              <span class="text-[10px] text-white/60 leading-tight">
                开始节点
                {props.data.config.params &&
                  props.data.config.params.length > 0 && (
                    <span class="ml-1">
                      · {props.data.config.params.length} 个参数
                    </span>
                  )}
              </span>
            </div>
          </div>
        </div>

        <Handle
          type="source"
          position={Position.Right}
          class="!bg-white !border-2 !border-current"
          style={{
            width: '6px',
            height: '6px',
            color: props.data.color,
          }}
        />
      </div>
    )
  },
})
